<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>009_类的操作</title>
    <style type="text/css">
        .b1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .b2 {
            /*width: 200px;
            height: 200px;*/
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<button id="btn01">点击按钮以后修改红色方块的样式</button>
<br /><br />
<div id="box1" class="b1"></div>

<script type="text/javascript">
    var btn01 = document.getElementById("btn01");
    var box1 = document.getElementById("box1");
    btn01.onclick = function () {

        /**
         * 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
         * 这样执行的性能比较差，而且这种形式，当我们修改多个样式时，也不太方便
         *
         * 我们希望的是一行代码能够修改多个样式
         * @type {string}
         */
        /*box1.style.width = 200 + "px";
        box1.style.height = 200 + "px";
        box1.style.backgroundColor = "blue";*/


        /**
         *  我们可以通过修改class属性来 间接 的修改元素的样式
         *  这样一来，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染页面一次，性能比较好，并且这种
         *  方式，可以使表现和行为进一步分离
         */
        // box1.className = "b2";
        // 如果需要该元素同时显示 b1 和 b2 的显示效果，则需要 += , 注意加上空格
        // box1.className += " b2";

        // addClass(box1, "b2");
        // removeClass(box1, "b1");
        toggleClass(box1, "b2");
    };

    /**
     * 定义一个函数，用来向一个元素中添加指定的class属性值
     * @param obj 要添加class属性的元素
     * @param cn 要添加的class值
     */
    function addClass(obj, cn) {

        if(!hasClass(obj, cn)) {
            obj.className += " " + cn;
        }
    }

    /**
     * 定义一个函数，判断该函数中是否含有指定的class属性值, 如果有该class，则返回true，否则返回false
     * @param obj 要添加class属性的元素
     * @param cn 要添加的class值
     */
    function hasClass(obj, cn) {
        // 判断obj中有没有cn class
        var reg = new RegExp("\\b" + cn + "\\b"); // 使用正则表达式判断
        return reg.test(obj.className);
    }

    /**
     * 定义一个函数，删除指定元素的class属性
     * @param obj 要添加class属性的元素
     * @param cn 要添加的class值
     */
    function removeClass(obj, cn) {
        var reg = new RegExp("\\b" + cn + "\\b"); // 使用正则表达式判断

        // 删除class
        obj.className = obj.className.replace(reg, "");
    }

    /**
     * 定义一个函数，用来切换元素中的类，如果元素中具有该类，则进行删除，如果元素中没有该类，则进行添加
     * @param obj 要添加class属性的元素
     * @param cn 要添加的class值
     */
    function toggleClass(obj, cn) {
        if(hasClass(obj, cn)) {
            removeClass(obj, cn);
        } else {
            addClass(obj, cn);
        }
    }



</script>
</body>
</html>